<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3D实现轮播效果</title>
    <meta name="keywords" content="3D特效">
    <meta name="description" content="用HTML5的animate实现左右轮播3D特效">

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #warp{
            position: relative;
            width:820px;
            height:300px;
            margin: 100px auto;
            /*background: #db5726;*/
        }
        #warp ul li{
            position: absolute;
            list-style: none;
            width: 220px;
            height: 300px;
        }
        #warp ul li img{
            width: 100%;
            height: 100%;
        }
        #warp ul li.center{
            width: 220px;
            height: 300px;
            top:0;
            left:300px;
            z-index: 10;
            opacity:1;
        }
        #warp ul li.two{
            width:210px;
            height: 260px;
            top:20px;
            left:100px;
            z-index: 9;
            opacity: 0.8;
        }
        #warp ul li.eight{
            width:210px;
            height: 260px;
            top:20px;
            left:510px;
            z-index: 8;
            opacity: 0.8;
        }
        #warp ul li.three{
            width:120px;
            height: 200px;
            top:50px;
            left:0px;
            z-index: 7;
            opacity: 0.6;

        }
        #warp ul li.seven{
            width:120px;
            height: 200px;
            top:50px;
            left:700px;
            z-index: 6;
            opacity: 0.6;
        }
        #warp ul li.four{
            width:80px;
            height: 170px;
            top:65px;
            left:300px;
            z-index: 5;
            opacity: 0;

        }
        #warp ul li.six{
            width:80px;
            height: 170px;
            top:65px;
            left:300px;
            z-index: 4;
            opacity: 0;

        }
        #warp ul li.five{
            width:80px;
            height: 170px;
            top:65px;
            left:300px;
            z-index: 3;
            opacity: 0;
        }
        #warp div.left,#warp div.right{
            position: absolute;
            font-size: 48px;
            font-weight: 900;
            top:125px;
            z-index: 11;
        }
        #warp div.left:hover,#warp div.right:hover{
            cursor: pointer;
        }
        #warp div.left{
            left: 0;

        }
        #warp div.right{
            right: 0;
        }
    </style>
</head>
<body>
    <div id="warp">
        <ul>
           <li class="center"><img src="images/img1.jpg" > </li> <!--图片大小为220*300-->
            <li class="two"><img src="images/img2.jpg"> </li>
            <li class="three"><img src="images/img3.jpg"> </li>
            <li class="four"><img src="images/img4.jpg"> </li>
            <li class="five"><img src="images/img1.jpg"> </li>
            <li class="six"><img src="images/img2.jpg"> </li>
            <li class="seven"><img src="images/img3.jpg"> </li>
            <li class="eight"><img src="images/img4.jpg"> </li>
        </ul>
        <div class="left"><</div>
        <div class="right"> > </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(".left").click(function () {
        move(true);
    });
    $(".right").click(function () {
        move(false);
    });
    function move(direction){
        var arrW=[],arrH=[],arrT=[],arrL=[],arrZ=[],arrO=[];
        $("#warp ul li").each(function(i){//遍历li，并获取原来的每个li的属性，保存起来
            arrW[i]=$(this).css("width");
            arrH[i]=$(this).css("height");
            arrT[i]=$(this).css("top");
            arrL[i]=$(this).css("left");
            arrZ[i]=$(this).css("z-index");
            arrO[i]=$(this).css("opacity");
        });
        $("#warp ul li").each(function(i){//点击左右，为每个li赋值
            var index;//得到当前中间图片的索引值
            if(direction){//向左划
                index=i+1;
                if(index>7) index=0;
            }else{//向右划
                index=i-1;
                if(index<0) index=7;

            }
            $(this).css("z-index",arrZ[index]);
            $(this).animate({//将获取的每个li的属性值，赋值给新的排序后的图片
                width:arrW[index],height:arrH[index],top:arrT[index],left:arrL[index],
                opacity:arrO[index]

            },1000);
        })
    }
</script>
</body>
</html>